<template>
  <div class="recommend-song">
    <h3>
      <router-link to="/home/songrc">{{title}}<i class="iconfont icon-youjiantou
"></i></router-link>
    </h3>
    <ul class="songs">
      <li v-for="(item,index) in recommentData" :key="index" @mouseleave="mouseMove = false" @mouseover="mouseMove = index">
        <!-- 听歌次数 -->
        <div class="mask-player-timer" v-show="mouseMove !== index">
          <i class="iconfont icon-yinle1"></i>{{item.playCount | initPlayCount}}
        </div>

        <!-- 播放 -->
        <div class="mask-play" v-show="mouseMove === index" @click="playCommentSong(item)">
          <i class="iconfont icon-sanjiaoright
"></i>
        </div>
        <img v-lazy="item.picUrl" alt="">
        <span class="song-title">{{item.name}}</span>
      </li>
    </ul>
  </div>
</template>

<script>
import {
  getSongList,
  getSongDetailById
} from '@/api/Personal'
export default {
  name: 'RecommendSong',
  props: {
    recommentData: {
      type: Array,
      default() {
        return []
      }
    },
    title: String
  },
  filters: {
    initPlayCount(count) {
      count = count > 1000 && count < 10000 ? Math.floor(count % 1000) + '千' : count
      count = count > 10000 ? Math.floor(count % 10000) + '万' : count
      return count
    }
  },
  data() {
    return {
      mouseMove: false,
      // 歌单的所有音乐信息
      musicList: []
    }
  },
  methods: {
    playCommentSong(item) {
      this.getPlayCommentSong(item.id)
      this.playmusic()
    },
    getPlayCommentSong(id) {
      getSongList(id).then(res => {
        const arr = []
        // 获取歌单中所有歌曲的id
        res.data.playlist.trackIds.forEach(item => {
          arr.push(item.id)
        })
        getSongDetailById(arr).then(res => {
          this.musicList = res.data.songs
        })

      })
    },
    // 播放音乐
    playmusic() {
      this.musicList.forEach(item => {
        this.playMusic(item)
      })
    }
  }
}
</script>

<style lang="less" scoped>
.recommend-song {
  h3 {
    display: flex;
    align-items: center;
    margin-left: 15px;
  }
  .songs {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    padding: 0;
    li {
      position: relative;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      border-radius: 15px;
      margin: 10px 12px;
      img {
        width: 250px;
        height: 250px;
        border-radius: 15px;
      }
      span {
        display: inline-block;
        font-size: 14px;
        margin: 10px 5px;
        width: 238px;
        // 当行溢出显示省略号
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .mask-player-timer {
        position: absolute;
        top: 0;
        text-align: right;
        width: 100%;
        z-index: 10;
        background: linear-gradient(to right, rgba(255, 255, 255, 0.01), rgba(0, 0, 0, 0.5)) !important;
        padding: 8px 10px;
        color: #fff;
        transition: all 2s;
        box-sizing: border-box;
      }
      .mask-play {
        position: absolute;
        bottom: 80px;
        right: 10px;
        width: 30px;
        height: 30px;
        background: rgba(0, 0, 0, 0.4);
        border-radius: 50%;
        z-index: 10;
        i {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          display: inline-block;
          margin-right: 20px;
          text-align: center;
          color: red;
        }
      }
    }
  }
  .icon-yinle1 {
    margin-right: 5px;
  }
}
</style>